<template>
  <section class="data-screen-ct">
    <div class="scroll_auto">
      <!-- top -->
      <div class="data-screen-top">
        <div class="data-screen-main-title">
          <span>重点数据总览</span>
        </div>
        <border-box-13 class="data-screen-main-cont">
          <div class="data-screen-main-chart center_top_wrap">
            <ul>
              <li v-for="(item, index) in dataScreeningTopList" :key="index">
                <el-statistic :title="item.title" :suffix="item.unit" :value="item.num"
                  :value-style="{ color: dataScreeningColor[index] }" />
              </li>
            </ul>
            <ul>
              <li v-for="(item, index) in dataScreeningBottomList" :key="index">
                <el-statistic :title="item.title" :suffix="item.unit" :value="item.num" :value-style="{
                  color:
                    dataScreeningColor[index + dataScreeningTopList.length / 2],
                }" />
              </li>
            </ul>
          </div>
        </border-box-13>
      </div>

      <!-- center -->
      <div class="data-screen-center">
        <div class="data-screen-ctnbox">
          <div class="data-screen-main-title">
            <span>区域信息总览</span>
          </div>
          <border-box-13 class="data-screen-main-cont">
            <center-chart-1 ref="refCenterChart1" :chart-data="centerChart1Data" />
          </border-box-13>
        </div>
        <div class="data-screen-ctnbox">
          <div class="data-screen-main-title">
            <span>健康排行榜</span>
          </div>
          <border-box-13 class="data-screen-main-cont">
            <scroll-ranking-board :config="centerChart2Config"
              style="width: 100%; height: 300px ; padding: 0px 20px 10px 5px; box-sizing: border-box;" />
          </border-box-13>
        </div>
      </div>

      <!-- bottom -->
      <div class="data-screen-bottom">
        <div class="data-screen-main-title">
          <span>健康度趋势分析</span>
        </div>
        <border-box-13 class="data-screen-main-cont">
          <center-chart-3 ref="refCenterChart3" :chart-data="centerChart3Data" />
        </border-box-13>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ref } from "vue";
import CenterChart1 from "../components/chart/CenterChart1.vue";
import CenterChart2 from "../components/chart/CenterChart2.vue";
import CenterChart3 from "../components/chart/CenterChart3.vue";
// api相关
import { apiCommon } from "@/utils/index.js";
import * as screenApi from "@/api/screen/screen";
import { getOverviewInfo, getOverviewInfo1 } from '@/api/screen/screen.js';

// datav
import { ScrollRankingBoard, BorderBox10, BorderBox13 } from "@kjgl77/datav-vue3";

const dataScreeningColor = ref([
  "#00cee4",
  "#00ea67",
  "#ff9a00",
  "#00cfa3",
  "#00ade0",
  "#9e67f8",
  "#f1b500",
  "#f1b500",
]);
let dataScreeningList = ref([]);
let dataScreeningTopList = ref([]);
let dataScreeningBottomList = ref([]);

const refCenterChart1 = ref(null);
const refCenterChart2 = ref(null);
const refCenterChart3 = ref(null);

const centerChart1Data = ref({});
const centerChart3Data = ref({});

const centerChart2Config = ref({
  data: [],
  unit: '分',
  sort: true,
  color: '#00CEE4'
});

// 接口测试
const apiTest = async () => {
  let params = {};
  const testData = await apiCommon(screenApi.getInfo, params);
  console.log(testData);
};
// apiTest()

// 获取重点数据
const averageHealthScore = ref();
const proportionOfHealthyStation = ref();
const scaleOf4GResources = ref();
const scaleOf5GResources = ref();
const numOfPhysicalStation = ref();
const numOfComplaints = ref();
const totalNumOfTickets = ref();
const numOfNotClosedTickets = ref();
getOverviewInfo().then(res => {
  averageHealthScore.value = res.data.healthyAvgScore;
  proportionOfHealthyStation.value = res.data.healthyStationPercentage;
  scaleOf4GResources.value = res.data.cell4gCount;
  scaleOf5GResources.value = res.data.cell5gCount;
  numOfPhysicalStation.value = res.data.physicalStationCount;
  numOfComplaints.value = res.data.complaintCount;
  totalNumOfTickets.value = res.data.eomsOrderCount;
  numOfNotClosedTickets.value = res.data.undoEomsOrder;
})
getOverviewInfo1().then(res => {
  console.log(res);
})
const getDataScreeningData = () => {
  dataScreeningList.value = [
    {
      title: "健康平均分",
      unit: "分",
      num: averageHealthScore,
    },
    {
      title: "健康基站占比",
      unit: "%",
      num: proportionOfHealthyStation,
    },
    {
      title: "4G资源规模",
      unit: "个",
      num: scaleOf4GResources,
    },
    {
      title: "5G资源规模",
      unit: "个",
      num: scaleOf5GResources,
    },
    {
      title: "物理站点数量",
      unit: "个",
      num: numOfPhysicalStation,
    },
    {
      title: "投诉数量",
      unit: "条",
      num: numOfComplaints,
    },
    {
      title: "本月工单总数",
      unit: "个",
      num: totalNumOfTickets,
    },
    {
      title: "未闭环工单数",
      unit: "个",
      num: numOfNotClosedTickets,
    },
  ];

  dataScreeningTopList.value = dataScreeningList.value.splice(
    0,
    dataScreeningList.value.length / 2
  );
  dataScreeningBottomList.value = dataScreeningList.value;
};

// 需要点击加载某个图表时 - 点击事件
const resetChart = () => {
  /* refCenterChart1.value.resetChart()
  refCenterChart2.value.resetChart()
  refCenterChart3.value.resetChart() */
};

// centerChart1
const getCenterChart1Data = () => {
  // 获取接口数据接口
  // ......

  // 图表赋值
  centerChart1Data.value = {
    mapData: [
      {
        name: "慈溪市",
        data1: 99, // 近30天健康度平均分
        data2: 7046, // 投诉数量
        data3: 33, // 故障工单
        data4: 7045, // 采编未处理
        data5: 8845, // 其他关键信息
      },
      {
        name: "余姚市",
        data1: 85, // 近30天健康度平均分
        data2: 7046, // 投诉数量
        data3: 7045, // 故障工单
        data4: 454, // 采编未处理
        data5: 8845, // 其他关键信息
      },
      {
        name: "海曙区",
        data1: 88, // 近30天健康度平均分
        data2: 66, // 投诉数量
        data3: 7045, // 故障工单
        data4: 7045, // 采编未处理
        data5: 8845, // 其他关键信息
      },
      {
        name: "江北区",
        data1: 98, // 近30天健康度平均分
        data2: 7046, // 投诉数量
        data3: 7045, // 故障工单
        data4: 323, // 采编未处理
        data5: 8845, // 其他关键信息
      },
      {
        name: "北仑区",
        data1: 96, // 近30天健康度平均分
        data2: 334, // 投诉数量
        data3: 7045, // 故障工单
        data4: 7045, // 采编未处理
        data5: 8845, // 其他关键信息
      },
      {
        name: "镇海区",
        data1: 94, // 近30天健康度平均分
        data2: 7046, // 投诉数量
        data3: 7045, // 故障工单
        data4: 654, // 采编未处理
        data5: 8845, // 其他关键信息
      },
      {
        name: "鄞州区",
        data1: 94, // 近30天健康度平均分
        data2: 7046, // 投诉数量
        data3: 7045, // 故障工单
        data4: 7045, // 采编未处理
        data5: 44, // 其他关键信息
      },
      {
        name: "奉化区",
        data1: 89, // 近30天健康度平均分
        data2: 46, // 投诉数量
        data3: 7045, // 故障工单
        data4: 705, // 采编未处理
        data5: 8845, // 其他关键信息
      },
      {
        name: "象山县",
        data1: 96, // 近30天健康度平均分
        data2: 7046, // 投诉数量
        data3: 7045, // 故障工单
        data4: 705, // 采编未处理
        data5: 8845, // 其他关键信息
      },
      {
        name: "宁海县",
        data1: 95, // 近30天健康度平均分
        data2: 7046, // 投诉数量
        data3: 7045, // 故障工单
        data4: 7045, // 采编未处理
        data5: 885, // 其他关键信息
      },
    ],
  };
};

// centerChart2
const getCenterChart2Data = () => {
  // 获取接口数据接口
  // ......

  // 图表赋值
  centerChart2Config.value.data = [
    {
      name: "慈溪市",
      value: 100,
    },
    {
      name: "余姚市",
      value: 95,
    },
    {
      name: "海曙区",
      value: 88,
    },
    {
      name: "江北区",
      value: 99,
    },
    {
      name: "镇海区",
      value: 92,
    },
    {
      name: "奉化区",
      value: 78,
    },
    {
      name: "鄞州区",
      value: 70,
    },
    {
      name: "北仑区",
      value: 83,
    },
    {
      name: "宁海县",
      value: 75,
    },
    {
      name: "象山县",
      value: 89,
    },
  ];
};

// CenterChart3
const getCenterChart3Data = () => {
  // 获取接口数据接口
  // ......

  // 图表赋值
  centerChart3Data.value = {
    fieldData: [
      "丽水",
      "诸暨",
      "桥头",
      "南浔",
      "湖州",
      "青田",
      "萧山",
      "金华",
      "奉化",
      "方言",
      "永康",
    ],
    yData: [120, 125, 150, 80, 70, 110, 130, 120, 320, 150, 80],
  };
};

// 初始化图表数据
const initChartData = () => {
  getDataScreeningData();

  getCenterChart1Data();
  getCenterChart2Data();
  getCenterChart3Data();
};
initChartData();
</script>

<style lang="scss" scoped>
.data-screen-ct {
  width: 100%;

  .scroll_auto {
    width: 104% !important;
  }

  .data-screen-top {
    margin-bottom: 1vw;

    .data-screen-main-cont {
      width: 100%;

      .center_top_wrap {
        width: 85% !important;
        margin: 0 auto;
        padding: 15px 0;

        ul {
          display: flex;
          justify-content: space-between;

          &:first-child {
            margin-bottom: 30px;
          }

          li {
            :deep .el-statistic {
              .el-statistic__head {
                color: #fff;
              }

              .el-statistic__content {
                .el-statistic__number {
                  font-size: 35px;
                }

                .el-statistic__suffix {
                  /* // color: v-bind("itemColor"); */
                  color: #fff;
                }
              }
            }
          }
        }
      }
    }
  }

  .data-screen-center {
    /* border: 1px solid red; */
    display: flex;
    justify-content: start;

    .data-screen-ctnbox {
      width: 50%;
      height: 55%;
      /* border: 1px solid pink; */
      /* &:last-child {
        margin-top: 4px;
      } */

      .data-screen-main-cont {
        width: 50%;

        /* height: 100%; */
        :deep .border-box-content {
          height: 300px;
        }
      }

      &:first-child {
        width: 55%;
      }

      &:last-child {
        flex: 1;
      }
    }
  }

  .data-screen-bottom {
    margin-top: 30px;

    :deep .border-box-content {
      height: 206px;
    }
  }
}
</style>
